<!-- 列表 -->
<template>
  <div class="list">
    <!-- 列表数据 -->
    <div class="ulist">
      <!-- 列表数据 -->
      <div class="list_data">
        <div class="add">
          <el-button type="primary" round @click="addlist()"
            >添加文章</el-button
          >
          <div class="search">
            <!-- 添加公告内容 -->
            <div class="s_content">
              <span class="text">文章名称：</span>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入文章名称"
                v-model="search_textarea1"
              ></el-input>
            </div>
            <!-- 显示状态 -->
            <div class="s_stort">
              <span class="text">显示状态：</span>
              <el-switch
                v-model="search_value"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                active-text="已启用"
                inactive-text="已禁用"
              ></el-switch>
            </div>
            <el-button type="primary" round @click="search_list()"
              >搜索</el-button
            >
            <el-button type="success" round @click="q_list()"
              >全部列表</el-button
            >
          </div>
        </div>
        <table-list
          :tableData="tableData"
          :listHeader="listHeader"
          @operate="operate"
          :type="type"
        ></table-list>
        <!-- 分页 -->
        <div class="paging">
          <paging-list @Listdata="getChilddptwo" :addNum="addNum"></paging-list>
        </div>
      </div>
    </div>

    <!-- 弹出详情 -->
    <el-dialog title="角色详情" :visible.sync="dialogTableVisible">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称">
          <el-input v-model="ruleForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="ment_list"
            default-expand-all
            :default-expanded-keys="show_list"
            :default-checked-keys="show_list"
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            show-checkbox
          ></el-tree>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog title="编辑列表" :visible.sync="dialogTableVisibles">
      <div class="content">
        <span class="text">文章分类名称：</span>
        <el-select v-model="value_text" placeholder="请选择分类文章名">
          <el-option
            v-for="item in articlename"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- <el-input type="textarea" autosize placeholder="请输入公告内容" v-model="textarea1"></el-input> -->
      </div>
      <div class="content">
        <span class="text">文章标题：</span>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="textarea1"
          @blur="textarea1 = publick.clearinput(textarea1)"
        ></el-input>
      </div>
      <div class="content">
        <span class="text">文章简介描述：</span>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="describe"
          @blur="describe = publick.clearinput(describe)"
        ></el-input>
      </div>
      <div class="contents">
        <span class="text">文章简介内容：</span>
        <!-- <el-input type="textarea" autosize placeholder="请输入内容" v-model="contents"></el-input> -->
        <vue-ueditor-wrap
          v-model="contents"
          :config="myConfig"
        ></vue-ueditor-wrap>
      </div>
      <div class="content">
        <span class="text">文章预览数：</span>
        <el-input
          type="number"
          autosize
          placeholder="请输入人数"
          v-model="view_number"
        ></el-input>
      </div>
      <!-- 显示状态 -->
      <div class="content">
        <span class="text">显示状态：</span>
        <el-switch
          style="display: block"
          v-model="value"
          active-color="#13ce66"
          active-value="1"
          inactive-value="0"
          active-text="已启用"
          inactive-text="已禁用"
        ></el-switch>
      </div>
      <!-- 添加公告内容 -->
      <div class="content" style="margin-bottom:3vh">
        <span class="text">排序：</span>
        <el-input
          type="Number"
         placeholder="请输入1~99的合法数字" v-model="sort" max="100" min="1"
        ></el-input>
      </div>
      <div class="content">
        <span class="text">文章图标：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload_one"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="but">
        <el-button type="primary" round @click="submitForm()"
          >确认修改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "../../../components/List/TableList";
import PagingList from "../../../components/List/PagingList";
import VueUeditorWrap from "vue-ueditor-wrap";
import axios from "axios";
export default {
  data() {
    return {
      placeholder: "请输入手机号", //input框中的placehould
      content: "", //input收入值
      //   value: "", //单时间日期
      Bnumber: 10, //每页条数
      Pnumber: 1, //当前页数
      addNum: 0, //总共多少条数
      selectname: "", //下拉列表内容
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      datas: {}, //列表操作返回的数据
      type: "essaylist", //列表类型
      Role_list: [], //可选择角色列表
      show_list: [], //展示列表
      ruleForm: {
        name: ""
      },
      dialogTableVisible: false, //点击展示详情
      dialogTableVisibles: false, //点击修改角色
      ment_list: [], //后台菜单列表
      defaultProps: {
        children: "child",
        label: "name"
      },
      textarea1: "", //公告内容
      value: "", //显示状态
      sort: "", //排序
      search_textarea1: "", //搜索内容
      search_value: "", //搜索状态
      remake: "", //备注内容
      articlename: [], //文章分类名
      imageUrl: "", //公告图标
      img_gg: "", //公告图标地址
      api: "https://api.xujiangyu.com/admin", //上传图片域名
      img_id: "", //图片id
      describe: "", //文章描述
      contents: "", //文章内容
      view_number: "", //查阅人数
      value_text: "", //分类名id
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: "300",
        // 初始容器宽度
        initialFrameWidth: "95%",
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "/static/UEditor/php/controller.php",
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/UEditor/"
      }
    };
  },
  components: {
    TableList,
    PagingList,
    VueUeditorWrap
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userAdminList();
    // 获取文章分类名称
    this.$api
      .getArticleCate({
        token: this.publick.token()
      })
      .then(res => {
        let data = res.data;
        let datas = data; //分类页面传来的列表值
        console.log(datas);
        datas.forEach(e => {
          let params = {};
          params.label = e.catename;
          params.value = e.artice_cate_id;
          this.articlename.push(params);
        });
      })
      .catch(res => {
        console.log(res);
      });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let header_name = [
      "文章图片",
      "文章标题",
      "文章简介",
      "查阅人数",
      "排序",
      "状态",
      "修改时间",
      "创建时间",
      "文章分类名称"
    ]; //列表头部
    let list_content = [
      "image_url",
      "name",
      "describe",
      "view_number",
      "sort",
      "is_show",
      "update_time",
      "create_time",
      "artice_cate_name"
    ]; //列表渲染内容字段
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
  },
  methods: {
    //获取分页信息
    getChilddptwo(e) {
      this.Pnumber = e.Pnumber;
      this.Bnumber = e.Bnumber;
    },
    //获取详情
    particulars() {
      this.$api
        .articleInfo({
          token: this.publick.token(),
          id: this.datas.artice_id
        })
        .then(res => {
          let data = res.data;
          console.log(data);
          this.textarea1 = data.name;
          this.value = data.is_show + "";
          this.sort = data.sort;
          this.contents = data.content;
          this.img_id = data.image_id;
          this.img_gg = data.image_url;
          this.imageUrl = data.image_url;
          this.view_number = data.view_number;
          this.describe = data.describe;
          this.value_text = data.artice_cate_id;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "look") {
        //    跳转查看页面
        this.dialogTableVisible = true;
        this.particulars();
      } else if (this.datas.type == "delect") {
        // 删除
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api
              .articleDel({
                token: this.publick.token(),
                id: this.datas.artice_id
              })
              .then(res => {
                console.log(res);
                this.$message({
                  type: "success",
                  message: res.message
                });
                this.userAdminList();
              })
              .catch(res => {
                console.log(res);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (this.datas.type == "amend") {
        // 修改
        this.dialogTableVisibles = true;
        this.particulars();
      }
    },
    userAdminList() {
      //获取公告列表
      this.$api
        .articleList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //提交修改
    submitForm() {
      this.$api
        .articleSave({
          name: this.textarea1,
          is_show: this.value,
          image_id: this.img_id,
          image_url: this.img_gg,
          describe: this.describe,
          content: this.contents,
          view_number: this.view_number,
          token: this.publick.token(),
          sort: this.sort,
          artice_cate_id: this.value_text,
          id: this.datas.artice_id
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.userAdminList();
          this.dialogTableVisibles = false;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //添加列表事件
    addlist() {
      this.$router.push({
        path: "/addessay",
        query: {
          // type为1是添加列表
          type: 1
        }
      });
    },
    // 点击搜索列表
    search_list() {
      //获取公告列表
      this.$api
        .articleList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber,
          name: this.search_textarea1,
          is_show: this.search_value
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 点击恢复全部数据
    q_list() {
      this.userAdminList();
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 判断周期图片
    beforeAvatarUpload_one(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios.post(this.api + "/upimage", param, config).then(response => {
        console.log(response);
        this.img_gg = response.data.data.images;
        this.img_id = response.data.data.images_id;
      });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    }
  },
  watch: {
    Bnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    Pnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    $route: function() {
      if (this.$route.query.type == "addlist") {
        this.userAdminList();
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list {
  width: 100%;
  height: 89vh;
  background: #fff;
  overflow: auto;
}
.ulist {
  background: #fff;
  width: 98%;
  margin: auto;
  margin-top: 2.5vh;
}
.screen {
  display: flex;
  height: 8vh;
  justify-content: flex-start;
  align-items: center;
}
.list_data {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.paging {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4vh;
  padding-bottom: 2vh;
}
.add {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.contents {
  width: 95%;
  /* height: 10vh; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding-left: 5%;
}
.text {
  font-size: 12px;
  display: block;
  width: 100px;
  text-align: center;
}
.but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.search {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.s_content {
  width: 35%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 10%;
  margin-left: 10%;
}
.s_stort {
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>